<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>附件分类管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 异步上传 -->
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>

</head>
<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">附件分类管理</h1>
            <a class="mui-icon mui-icon-bars mui-pull-right" href="#menu_right"></a>
        </header>
        <div class="mui-content" style="padding-top: 2rem;" v-show="block == 1">
            <div class="mui-card">
                <ul class="mui-table-view" v-for="row in type_list">
                    <li class="mui-table-view-cell">
                        <a :href="host + row.id" class="mui-navigate-right">
                            <span class="mui-badge mui-badge-danger">{{row.id}}</span>
                            {{row.name}}
                        </a>
                    </li>
                    
                </ul>
            </div>
        </div>
        <div class="mui-content" style="padding-top: 2rem;" v-show="block == 0">
            <div class="mui-card">
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>分类名称</label>
                        <input v-model="name" type="text" placeholder="请输入分类名称">
                    </div>
                    <div class="mui-input-row">
                        <label>备注信息</label>
                        <input v-model="meno" type="text" placeholder="请输入备注信息">
                    </div>
                    <div class="mui-button-row">
                        <button @click="addtype" type="button" class="mui-btn mui-btn-primary">确认</button>&nbsp;&nbsp;
                        <button @click="block_show" type="button" class="mui-btn mui-btn-danger">取消</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- 弹出层 start -->
        <div id="menu_right" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a @click="block_show">添加分类</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#menu_right"><b>取消</b></a>
                </li>
            </ul>
        </div>
        <!-- 弹出层 end -->
    </div>
    <script src="../mui/hello-mui/js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        new Vue({
            el: '#app',
            data: {
                block: 1,
                name: '',
                meno: '',
                type_list: [],
                host: './index.html?tid=',
            },
            created: function (){
                var the = this;
                axios.get(de.file_type).then(function (data){
                    var dd = data.data;
                    if (dd.code == 200) {
                        the.type_list = dd.data; 
                    } else {
                        console.log(dd.info);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            methods: {
                // 区块切换
                block_show: function (){
                    this.block = this.block == 1 ? 0 : 1 ;
                    mui('#menu_right').popover('hide');
                },
                // 添加分类
                addtype: function (){
                    var the = this;
                    axios.post(de.file_type, de.pickData(this, ['name', 'meno'])).then(function (data){
                        var dd = data.data;
                        if (dd.code == 200) {
                            the.images = dd.data; 
                        } else {
                            console.log(dd.info);
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
            }
        });
    </script>
</body>
</html>